<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
    
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    
    <title>万年历看板--淡旺季来源数据</title>
</head>
<body>

<div class="container-fluid">

    <div class="row" align="center" style="margin-bottom:8px; margin-top:5px;">
                <form class="form-inline" action="$!{__beat.server.contextPath}/calendar/season_source" method="post">
                        <div class="form-group" style="width:180px">
                            <label for="businessName" style="padding-left:15px;">业务线：</label>
                            <select id="businessName" name="businessName" class="form-control input-sm" style="align:center; width:100px; ">
                               #foreach($buss in $businessList)
                                <option value="$buss" #if("$buss" == $!businessName) selected #end>$business_CN_Map.get("$buss")</option>
                                #end  
                            </select>
                        </div>  
                        <div class="form-group">                       
                               <input type="submit" value="查询" class="btn btn-primary btn-xs">
                        </div>
                </form>
    </div>

    <div class="datacontent"  >
        <div class="dataTit">
                <i class="mark"></i><span>指标选择</span>
        </div>

        <div class="dataShow">            
            <div>
                <form class="form-inline">  
                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="cate_option">类别：</label>
                                <select id="cate_option" class="form-control input-sm" style="align:center; width:100px; ">
                                     #foreach($!{p} in ${CateList})
                                        <option value="$!{p}">$!{p}</option>
                                    #end
                                </select>                     
                     </div>

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="index_Type">指标：</label>
                                <select id="index_Type" class="form-control input-sm" style="align:center; width:100px; ">
                                    <option value="uv">UV</option>
                                    <option value="pv">PV</option>
                                    <option value="vppv">VPPV</option>
                                    <option value="list_uv">list-uv</option>
                                    <option value="list_uv">list-pv</option>
                                    <option value="list_uv">lide-uv</option>
                                    <option value="list_uv">lide-pv</option>
                                </select>                     
                     </div>

                     <button id="refresh_cSeason_source_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
               </form> 
            </div>   
        </div>
    </div>

     <div class="datacontent"  >
        <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN}PC端淡旺季来源数据</span>
        </div>

        <div class="dataShow">            
            <div id='SeasonSourceOption_pc' dateGrp='week_begin'>
                <form class="form-inline">            
                       
                    <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default btnSeasonSource_pc" dateGrp='stat_date'>日</button>
                        <button type="button" class="btn btn-default active btnSeasonSource_pc" dateGrp='week_begin'>周</button>
                        <button type="button" class="btn btn-default btnSeasonSource_pc" dateGrp='month_num'>月</button>
                    </div>

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="source_option_pc">来源：</label>
                                <select id="source_option_pc" class="form-control input-sm" style="align:center; width:100px; ">
                                <option value="直接访问">直接访问</option>
                                <option value="站内引荐">站内引荐</option>  
                                <option value="站外引荐">站外引荐</option>
                                <option value="广告系列">广告系列</option> 
                                <option value="SEM">SEM</option>
                                <option value="SEO">SEO</option>                      
                                </select>
                    </div>

                    <label>注：气泡后面为前几年均值</label> 
                </form> 
            </div>   
            <div id="seasonSource_EC_pc" style="height:380px"></div>
        </div>
    </div> <!--end of datacontent -->

<!--
 <div class="datacontent"  >
        <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN}PC端淡旺季漏斗月数据</span>
        </div>

        <div class="dataShow">            
            <div id='funnel_month_pc' >
                <form class="form-inline">    

                    <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="month_option_pc">月份：</label>
                                <select id="month_option_pc" class="form-control input-sm" style="align:center; width:100px; ">  
                                    <option value="1">一月</option>
                                    <option value="2">二月</option>
                                    <option value="3">三月</option>
                                    <option value="4">四月</option>
                                    <option value="5">五月</option>
                                    <option value="6">六月</option>
                                    <option value="7">七月</option>
                                    <option value="8">八月</option>
                                    <option value="9">九月</option>
                                    <option value="10">十月</option>
                                    <option value="11">十一月</option>
                                    <option value="12">十二月</option>
                                </select>                     
                     </div> 

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="funnel_pc_month">来源：</label>
                                <select id="funnel_pc_month" class="form-control input-sm" style="align:center; width:100px; ">
                                <option value="直接访问">直接访问</option>
                                <option value="站内引荐">站内引荐</option>  
                                <option value="站外引荐">站外引荐</option>
                                <option value="广告系列">广告系列</option> 
                                <option value="SEM">SEM</option>
                                <option value="SEO">SEO</option>                      
                                </select>
                    </div>         

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="season_pc_month">淡旺季：</label>
                                <select id="season_pc_month" class="form-control input-sm" style="align:center; width:100px; ">
                                    <option value="high">旺季</option>
                                    <option value="low">淡季</option>
                                </select>                     
                     </div>

                     <button id="refresh_funnel_pc_month_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
                </form> 
            </div>   
            <div id="seasonFunnel_EC_pc_month" style="height:380px"></div>
        </div>
    </div> <!--end of datacontent -->
 <!--

    <div class="datacontent"  >
        <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN}PC端淡旺季漏斗周数据</span>
        </div>

        <div class="dataShow">            
            <div id='funnel_week_pc' >
                <form class="form-inline">    

                    <label for="beginDate_week_pc">时间: </label>
                    <div class="form-group input-group input-group-sm" style="width: 10%;">
                        <input id="beginDate_week_pc" type="text"  class="form-control input-sm time" placeholder="选择时间" value="$!maxDate_pc"/>
                    </div>

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="source_pc_week">来源：</label>
                                <select id="source_pc_week" class="form-control input-sm" style="align:center; width:100px; ">
                                <option value="直接访问">直接访问</option>
                                <option value="站内引荐">站内引荐</option>  
                                <option value="站外引荐">站外引荐</option>
                                <option value="广告系列">广告系列</option> 
                                <option value="SEM">SEM</option>
                                <option value="SEO">SEO</option>                      
                                </select>
                    </div>         

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="season_pc_week">淡旺季：</label>
                                <select id="season_pc_week" class="form-control input-sm" style="align:center; width:100px; ">
                                    <option value="high">旺季</option>
                                    <option value="low">淡季</option>
                                </select>                     
                     </div>

                     <button id="refresh_funnel_pc_week_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
                </form> 
            </div>   
            <div id="seasonFunnel_EC_pc_week" style="height:380px"></div>
        </div>
    </div> <!--end of datacontent--> 

 

    <div class="datacontent"  >
        <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN}M端淡旺季来源数据</span>
        </div>

        <div class="dataShow">            
            <div id='SeasonSourceOption_m' dateGrp='week_begin'>
                <form class="form-inline">            
                       

                    <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default btnSeasonSource_m" dateGrp='stat_date'>日</button>
                        <button type="button" class="btn btn-default active btnSeasonSource_m" dateGrp='week_begin'>周</button>
                        <button type="button" class="btn btn-default btnSeasonSource_m" dateGrp='month_num'>月</button>
                    </div>

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="source_option_m">来源：</label>
                                <select id="source_option_m" class="form-control input-sm" style="align:center; width:100px; ">
                                <option value="自有">自有</option>
                                <option value="SEO">SEO</option>  
                                <option value="渠道">渠道</option>
                                <option value="手机QQ">手机QQ</option> 
                                <option value="陌陌">陌陌</option>
                                <option value="其他">其他</option>                      
                                </select>
                    </div> 

                    <label>注：气泡后面为前几年均值</label> 
                </form> 
            </div>   
            <div id="seasonSource_EC_m" style="height:380px"></div>
        </div>
    </div> <!--end of datacontent -->
    
<!--
 <div class="datacontent"  >
        <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN}M端淡旺季漏斗月数据</span>
        </div>

        <div class="dataShow">            
            <div id='funnel_month_m' >
                <form class="form-inline">    

                    <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="month_option_m">月份：</label>
                                <select id="month_option_m" class="form-control input-sm" style="align:center; width:100px; ">  
                                    <option value="1">一月</option>
                                    <option value="2">二月</option>
                                    <option value="3">三月</option>
                                    <option value="4">四月</option>
                                    <option value="5">五月</option>
                                    <option value="6">六月</option>
                                    <option value="7">七月</option>
                                    <option value="8">八月</option>
                                    <option value="9">九月</option>
                                    <option value="10">十月</option>
                                    <option value="11">十一月</option>
                                    <option value="12">十二月</option>
                                </select>                     
                     </div> 

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="funnel_m_month">来源：</label>
                                <select id="funnel_m_month" class="form-control input-sm" style="align:center; width:100px; ">
                                <option value="直接访问">直接访问</option>
                                <option value="站内引荐">站内引荐</option>
                                <option value="站外引荐">站外引荐</option>
                                <option value="广告系列">广告系列</option> 
                                <option value="SEM">SEM</option>
                                <option value="SEO">SEO</option>                      
                                </select>
                    </div>         

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="season_m_month">淡旺季：</label>
                                <select id="season_m_month" class="form-control input-sm" style="align:center; width:100px; ">
                                    <option value="high">旺季</option>
                                    <option value="low">淡季</option>
                                </select>                     
                     </div>

                     <button id="refresh_funnel_m_month_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
                </form> 
            </div>   
            <div id="seasonFunnel_EC_m_month" style="height:380px"></div>
        </div>
    </div> <!--end of datacontent -->
 
<!--
     <div class="datacontent"  >
        <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN}M端淡旺季漏斗周数据</span>
        </div>

        <div class="dataShow">            
            <div id='funnel_week_m' >
                <form class="form-inline">    

                    <label for="beginDate_week_m">时间: </label>
                    <div class="form-group input-group input-group-sm" style="width: 10%;">
                        <input id="beginDate_week_m" type="text"  class="form-control input-sm time" placeholder="选择时间" value="$!maxDate_m"/>
                    </div>

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="source_m_week">来源：</label>
                                <select id="source_m_week" class="form-control input-sm" style="align:center; width:100px; ">
                                <option value="直接访问">直接访问</option>
                                <option value="站内引荐">站内引荐</option>  
                                <option value="站外引荐">站外引荐</option>
                                <option value="广告系列">广告系列</option> 
                                <option value="SEM">SEM</option>
                                <option value="SEO">SEO</option>                      
                                </select>
                    </div>         

                     <div class="form-group" style="width:160px;margin-left:10px">
                                <label for="season_m_week">淡旺季：</label>
                                <select id="season_m_week" class="form-control input-sm" style="align:center; width:100px; ">
                                    <option value="high">旺季</option>
                                    <option value="low">淡季</option>
                                </select>                     
                     </div>

                     <button id="refresh_funnel_m_week_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
                </form> 
            </div>   
            <div id="seasonFunnel_EC_m_week" style="height:380px"></div>
        </div>
    </div> <!--end of datacontent --> 

</div>
</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>

<link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.css" type="text/css" /> 
<link type="text/css" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.css" rel="stylesheet" />
<script src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.js"></script>


<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/source/echarts.js"></script>
<!-- <script src="$!{__beat.server.contextPath}/js/wnl.js"></script> -->
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">
    var businessName = "$!{businessName}";

    var dayMap={1:"周一",2:"周二",3:"周三",4:"周四",5:"周五",6:"周六",0:"周日"};
    var datepicker_op={
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        todayHighlight: true,
        minViewMode:0,
        orientation: "top left"
    };

    function getDate(yyyymmdd){
        if(yyyymmdd.length==10){        //yyyy-MM-dd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(5,2)+'/'+yyyymmdd.substr(8,2));
        }else if(yyyymmdd.length==8){
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2)+'/'+yyyymmdd.substr(6,2));
        }else if(yyyymmdd.length==6){
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2));
        }
    }

    //获取星期几 dayDate 的格式为 yyyy-MM-dd
    function getWeekDay(dayDate){
        var jsDate = new Date(Date.parse(dayDate.replace(/\-/g,'/')));
        var weekNumber = jsDate.getDay();
        return dayMap[weekNumber];
    }

    function setDatePicker(ec,dateGrp,input){
        if('week_begin'==dateGrp){
        }else if('month_num'==dateGrp){
            datepicker_op.minViewMode=1;
            datepicker_op.format='yyyy-mm';
        }else{
            datepicker_op.minViewMode=0;
            datepicker_op.format='yyyy-mm-dd';
        }
        input.datepicker('remove');
        input.datepicker(datepicker_op);
        //获取显示的日期数组
        var days_show=ec.getShowDays();
        var days_all=ec.getAllDays();
        //设置时间可选范围
        input.datepicker('setStartDate',new Date(getDate(days_all[0])));
        input.datepicker('setEndDate',new Date(getDate(days_all[days_all.length-days_show.length])));
    }

      function changeDateGrp(item){
        var dateGrpVal = $(item).attr('dateGrp');
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('dateGrp',dateGrpVal);
    }

    function changeIndex(item){
        var indexVal = $(item).val();
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('indexType',indexVal);
    }

    $('.btn-tab button').click(function(e){
        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
    });

    
    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/js/calendar"}});
    
    var charts = [];

    //PC淡旺季数据图
    require(['dashboard/season_source_pc'],function(totalEC){
        charts.push(totalEC);
        totalEC.show(businessName,2);
    });   

   //PC漏斗图 月
    require(['dashboard/funnel_pc_month'],function(totalEC){
        charts.push(totalEC);
        totalEC.show(businessName,2);
    });  

     //PC漏斗图 周
    require(['dashboard/funnel_pc_week'],function(totalEC){
        charts.push(totalEC);
        totalEC.show(businessName,2);
    });  

    //M淡旺季数据图
    require(['dashboard/season_source_m'],function(totalEC){
        charts.push(totalEC);
        totalEC.show(businessName,2);
    });   

    //M漏斗图 月
    require(['dashboard/funnel_m_month'],function(totalEC){
        charts.push(totalEC);
        totalEC.show(businessName,2);
    });  

     //M漏斗图 周
    require(['dashboard/funnel_m_week'],function(totalEC){
        charts.push(totalEC);
        totalEC.show(businessName,2);
    });  


    //格式化输出数字
    function format_number(n){
        var b=parseInt(n).toString(); 
        var len=b.length; 
        if(len<=3){return b;} 
        var r=len%3; 
        return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(","); 
    };


    $(window).resize(function(){
        $.each(charts,function(i,n){
            n.resize();
        });
    });

</script>
</html>